<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span>历次结果</span>
      </div>
      <div class="div">
      </div>
    </header>
    <div class="content">
      <div class="title">
        {{this.$route.query.title}}
      </div>
      <template>
        <el-table
          :header-cell-style="{
                'background-color': '#1da4f2',
                'color': '#fff',
                'font-weight': '400'
          }"
          ref="table"
          class="tab"
          :data="tableData"
          border
          width="100%"
          :max-height="Math.floor(height) - 20"
          @cell-click="handle"
        >
          <el-table-column
            prop="title"
            fixed
            label=""
            width="100">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in allList"
            :key="index"
            :fixed="tableData[index].fixed"
            :label="tableData[0]['label' + index]"
            :width="[item.width !== undefined ? item.width : 100]">
            <template slot-scope="scope" >
<!--           v-bind:to="'/abc/' + scope.row.title"    :prop="'ping' + index"-->
              <a style="color: #1DA4F2"
                 @click="clickTd('ping' + index, index)"
                 v-if="scope.row['ping' + index] === '查看资料' || scope.row['ping' + index] === '复评'+ index +'资料'">
                {{
                scope.row['ping' + index]
                }}
              </a>
              <a v-else >
                {{
                scope.row['ping' + index]
                }}
              </a>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'CopyImg',
  data () {
    return {
      tableData: [
        {
          title: '评估人员'
        },
        {
          title: '评估时间'
        },
        {
          title: '评估结果'
        },
        {
          title: '评估资料'
        }
      ],
      height: 0,
      allList: []
    }
  },
  mounted () {
    this.height = $(window).height() - $('.content').offset().top - 10
    this.getSubjectAnswerHistory()
  },
  methods: {
    clickTd (name, index) {
      var data = JSON.stringify(this.allList[index])
      sessionStorage.setItem('data', data)
      this.$router.push({path: '/imgShow', query: {title: this.$route.query.title}})
    },
    handle (row, column, event, cell) {
      // console.log(row)
      // console.log(column)
      // console.log(event)
      // console.log(cell)
    },
    getSubjectAnswerHistory () {
      this.$http.getSubjectAnswerHistory({ID: this.$route.query.ID, SUBJECT_ID: this.$route.query.SUBJECT_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.allList = res.data.data
            var _this = this
            res.data.data.forEach(function (curr, currindex, currarr) {
              if (currindex === 0) {
                _this.$set(_this.tableData[0], 'label' + currindex, '首评')
                // _this.$set(_this.tableData[3], 'ping' + currindex, '首评资料')
              } else {
                _this.$set(_this.tableData[0], 'label' + currindex, '复评' + currindex)
                // _this.$set(_this.tableData[3], 'ping' + currindex, '复评' + currindex + '资料')
              }
              _this.$set(_this.tableData[0], 'ping' + currindex, curr.OP_NICK_NAME)
              _this.$set(_this.tableData[1], 'ping' + currindex, curr.CREATED_AT)
              _this.$set(_this.tableData[2], 'ping' + currindex, curr.answer.choose_name)
              _this.$set(_this.tableData[3], 'ping' + currindex, '查看资料')
            })
            console.log(this.tableData)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 100vh;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
  }
  .div{
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .solt{
    color: #1DA4F2;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:first-child,
  .div:last-child{
    width: 30% !important;
  }
  .div:first-child img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .title{
    width: 92%;
    height: 44px;
    border-radius: 10px;
    background: white;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 5px auto;
  }
</style>
